<template>
	<div class="product-add-box">
		<!-- 步骤条 -->
		<el-steps
			:space="200"
			:align-center="true"
			:active="pageNum"
			finish-status="success"
			>
			<el-step title="填写商品信息"></el-step>
			<el-step title="填写商品促销"></el-step>
			<el-step title="填写商品属性"></el-step>
			<el-step title="选择商品关联"></el-step>
		</el-steps>
		
		<pinfo v-if="showStatus[0]" :productinfo="productinfo" @changeStatus="changeStatusM"  :pageNum="0"></pinfo>
		<psale v-if="showStatus[1]" :productinfo="productinfo" @changeStatus="changeStatusM"  :pageNum="1"></psale>
		<pattr v-if="showStatus[2]" :productinfo="productinfo" @changeStatus="changeStatusM"  :pageNum="2"></pattr>
		<passo v-if="showStatus[3]" :productinfo="productinfo" @changeStatus="changeStatusM"  :pageNum="3"></passo>
	</div>
</template>

<script>
	import pinfo from '@/views/pms/productadd/component/pinfo.vue';
	import psale from '@/views/pms/productadd/component/psale.vue';
	import pattr from '@/views/pms/productadd/component/pattr.vue';
	import passo from '@/views/pms/productadd/component/passo.vue';
	import {getProductinfo} from '@/api/product.js'
	
	export default {
		data(){
			return{
				pageNum:0,
				showStatus:[true,false,false,false],
				productinfo:{
				  "albumPics": "string",		//画册图片，连产品图片限制为5张，以逗号分割
				  "brandId": 0,					//品牌id
				  "brandName": "string",		//品牌名称
				  "deleteStatus": 0,			//删除状态
				  "description": "string",		//产品描述信息
				  "detailDesc": "string",		//产品详情描述
				  "detailHtml": "string",		//html详情
				  "detailMobileHtml": "string",	//移动端详情
				  "detailTitle": "string",		//详细页标题
				  "feightTemplateId": 0,		//
				  "giftGrowth": 0,				//赠送的成长值
				  "giftPoint": 0,				//赠送积分
				  "id": 0,						//商品编号--新增商品无编号
				  "keywords": "string",			//商品关键字
				  "lowStock": 0,				//库存预警值
				  "memberPriceList": [			//会员价格
					{
					  "id": 0,						//标识
					  "memberLevelId": 0,			//会员级别编号
					  "memberLevelName": "string",	//会员级别名称
					  "memberPrice": 0,				//会员价
					  "productId": 0				//产品编号
					}
				  ],
				  "name": "string",					//商品名称
				  "newStatus": 0,					//是否新品
				  "note": "string",					//商品备注
				  "originalPrice": 0,				//商品售价
				  "pic": "string",					//商品图片
				  "prefrenceAreaProductRelationList": [
					{
						  "id": 0,
						  "prefrenceAreaId": 0,
						  "productId": 0
						}
					  ],
					  "previewStatus": 0,				//是否是预告商品 0,1
					  "price": 0,						//商品的市场价
					  "productAttributeCategoryId": 0,	//商品属性分类id		
					  "productAttributeValueList": [	//商品属性值集合
						{
						  "id": 0,						//
						  "productAttributeId": 0,		//产品的属性id			7
						  "productId": 0,				//产品id
						  "value": "string"				//属性值				黑色,红色
						}
					  ],
					  "productCategoryId": 0,			//商品分类id
					  "productCategoryName": "string",	//商品分类名称
					  "productFullReductionList": [		//商品满减价格设置
						{
						  "fullPrice": 0,
						  "id": 0,
						  "productId": 0,
						  "reducePrice": 0
						}
					  ],
					  "productLadderList": [			//商品阶梯价格设置
						{
						  "count": 0,
						  "discount": 0,
						  "id": 0,
						  "price": 0,
						  "productId": 0
						}
					  ],
					  "productSn": "string",				//商品货号
					  "promotionEndTime": "2021-06-18T06:49:05.280Z",	//促销结束时间
					  "promotionPerLimit": 0,				//活动限购数量
					  "promotionPrice": 0,					//促销价格
					  "promotionStartTime": "2021-06-18T06:49:05.280Z",//促销开始时间
					  "promotionType": 0,	//促销类型：0->没有促销使用原价;1->使用促销价；2->使用会员价；3->使用阶梯价格；4->使用满减价格；5->限时购
					  "publishStatus": 0,	//上架状态
					  "recommandStatus": 0,	//推荐状态
					  "sale": 0,			//销量
					  "serviceIds": "string",	//以逗号分割的产品服务：1->无忧退货；2->快速退款；3->免费包邮
					  "skuStockList": [		//商品的sku库存信息
						{
						  "id": 0,
						  "lockStock": 0,
						  "lowStock": 0,
						  "pic": "string",
						  "price": 0,
						  "productId": 0,
						  "promotionPrice": 0,
						  "sale": 0,
						  "skuCode": "string",
						  "spData": "string",
						  "stock": 0
						}
					  ],
					  "sort": 0,						//排序
					  "stock": 0,						//库存
					  "subTitle": "string",				//子标题（副标题，二级标题)
					  "subjectProductRelationList": [	//专题和商品关系
						{
						  "id": 0,
						  "productId": 0,
						  "subjectId": 0
						}
					  ],
					  "unit": "string",					//规格
					  "usePointLimit": 0,				//限制使用的积分数
					  "verifyStatus": 0,				//审核状态：0->未审核；1->审核通过
					  "weight": 0						//商品重量，默认为克
					}
			}
		},
		watch:{
		  $route(to,from){
		    console.log("to.from",to.path);
		  }
		},
		mounted() {
			// console.log("mounted..",this.$route.query.id);
			let id = this.$route.query.id;
			if(id){
				getProductinfo(this.$route.query.id)
				.then(resp=>{
					console.log("resp",resp);
					this.productinfo = resp.data;
					this.productinfo.id = id;
				})
			}
			
		},
		methods:{
			changeStatusM(num){
				console.log("触发了没有",num)
				//将num位改成true，其他改成false
				this.showStatus.fill(false);
				// 要想触发视图更新，必须使用指定的数组方法
				// this.showStatus[num] = true;
				this.pageNum = num;
				this.showStatus.splice(num,1,true);//从num位开始替换，删除多少个,替换成true
			}
		},
		components:{
			pinfo,psale,pattr,passo
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.product-add-box{
		width:60%;
		border:1px solid #ccc;
		margin:auto;
		margin-top:20px;
		padding:30px 30px;
		.btn-box{
			text-align: center;
		}
	}
</style>
